<template>
	<div class="borderAnimation">
		<h2>目录菜单动画</h2>
		<div class="fo-Gray mt10">目录菜单动画组件的实例和实现思路代码</div>
		<div class="fo-Gray mt10">纯原生,不依赖jq,(滚动缓动动画,事件委托,锚点)</div>
		<h3>类型1</h3>
		<div class="fo-Gray mt10">注意 将  document.scrollingElement.scrollTop  换成  document.querySelector('.app-main').scrollTop</div>
		<div class="fo-Gray mt10">注意 将  window.onscroll  换成  document.querySelector('.app-main').onscroll</div>
		
		<div class="fo-Gray mt10">可配置滚动动画时长,当前滚动的到的页面距离屏幕顶部的距离</div>
		<example1-html></example1-html>
		<example1></example1>
		
	</div>
</template>

<script>
	import example1 from './components/example1.vue'
	import example1Html from './components/example1Html.vue'

	export default {
		components: {
			example1,example1Html
		},
		name: "borderAnimation",
	}
</script>

<style>
</style>
